<!-- 设备计划高级搜索 -->
<template>
    <div class="e-form">
        <el-form ref="form" :model="formData" label-width="100px">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="所属机构：">
                        <el-input
                            v-model="orgName"
                            placeholder="请选择机构"
                            readonly
                        >
                            <i slot="suffix" class="el-input__icon el-icon-document-copy" @click="selectOrg('orgName')"></i>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12" v-if='type == 1'>
                    <el-form-item label="使用单位：">
                        <el-input
                            v-model="useUnit"
                            placeholder="请选择使用单位"
                            readonly
                        >
                            <i slot="suffix" class="el-input__icon el-icon-document-copy" @click="selectOrg('useUnit')"></i>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12" v-if='type == 2'>
                    <el-form-item label="外协单位：">
                        <el-input
                            v-model="assistTeam"
                            placeholder="请选择外协单位"
                            readonly
                        >
                            <i slot="suffix" class="el-input__icon el-icon-document-copy" @click="selectAssistTeam"></i>
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row v-if="type==1">
                <el-col :span="12">
                    <el-form-item label="设备名称：">
                        <el-input
                            v-model="formData.equipmentName"
                            placeholder="请选择设备名称"
                            readonly
                        >
                            <i slot="suffix" class="el-input__icon el-icon-document-copy" @click="selectEquipCategory"></i>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="台账状态：">
                        <el-select v-model="formData.states" multiple>
                            <el-option :value="item.value" :label="item.label" v-for="item,index in accountStatus" :key="index" ></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row v-if="type==2">
                <el-col :span="12">
                    <el-form-item label="设备名称：">
                        <el-input
                            v-model="formData.equipmentName"
                            placeholder="请输入设备名称"
                        >
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>

<script>
import { mapMutations, mapState } from 'vuex'
import { selectAllOrg, selectEquipmentBase, selectOutsourcing } from '@/api/equip/popupCallback.js'
export default {
    data () {
        return {
            res: '',
            checkAll: false,
            isIndeterminate: false,
            checkedState: [], //选择的状态
            orgName: '', //所属机构
            formData: {
                'belongOrgId': '', //所属机构Id
                'equipmentName': '',
                'keyword': '',
                'limit': 20,
                'orgId': localStorage.getItem('searchOrgId'),
                'page': 1,
                'states': [], //台账状态
                'useId': '', //使用单位id
                'supplierId': '', //	外协单位id
            },
            useUnit: '', //使用单位
            equipCategoryName: '', //设备类别
            assistTeam: '', //外协单位
            type: this.$route.query.type,  // 1自有/租赁台账  2外协台账
        }
    },
    components: {
    },
    computed: {
        ...mapState({
            stateForm: state => state.equip.equipData.state, //状态
            accountStatus: state => state.equip.equipData.accountStatus, //台账状态
        }),
        statusLable () {
            return param=> {
                const state =  this.$store.state.equip.equipData.state
                const obj = state.find(x=>x.value === param)
                return obj.label
            }
        },
    },
    watch: {
        formData: {
            handler (newVal) {
                this.setSearchData({ equipSearchData: newVal })
            },
            deep: true
        }
    },
    mounted () {
    },
    methods: {
        ...mapMutations(['setSearchData']),
        //所属机构/使用单位
        async selectOrg (name) {
            let data =  await selectAllOrg({ 'title': '选择组织机构' })
            if(name == 'orgName') {
                this.orgName = data[0].orgName
                this.formData.belongOrgId =  data[0].orgId
            }
            if(name == 'useUnit') {
                this.useUnit = data[0].orgName
                this.formData.useId = data[0].orgId
            }
        },
        //设备名称
        selectEquipCategory () {
            let json = {
                'categoryId': '00000',
                'isUpdate': false,
                'keyword': ''
            }
            selectEquipmentBase(json).then(res=>{
                let equipCategoryName = []
                let categoryId = []
                res.forEach(item=>{
                    equipCategoryName.push(item.equipmentName)
                    categoryId.push(item.equipmentId)
                    this.equipCategoryName = equipCategoryName.join('、')
                    this.formData.equipmentName = equipCategoryName.join(',')
                })
                //this.equipCategoryName = res[0].categoryName
                // this.formData.categoryId = res[0].categoryId
            })
        },
        //选择外协单位
        selectAssistTeam () {
            selectOutsourcing([]).then(res=>{
                this.assistTeam = res[0].secondPartyName
                this.formData.supplierId = res[0].contractId
            })
        }
    },
}
</script>

<style lang='scss' scoped>
.separ{
        display: inline-block;
        font-weight: bold;
        width: 4%;
        margin: 0 1% 0 1%;
        text-align: center;
    }
  .e-form {
    padding: 20px;
}

</style>
